---
title: "Rotate"
description: "Utilities for rotating elements with transform."
---

import plugin from 'tailwindcss/lib/plugins/rotate'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Usage

Rotate an element by first enabling transforms with the `transform` utility, then specifying the rotation angle using the `rotate-{angle}` utilities.

```html lightBlue
<template preview>
  <div class="flex flex-col justify-around space-y-12 md:flex-row md:space-y-0 md:space-x-12">
    <div class="w-16 h-16 bg-light-blue-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 transform rotate-0" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-light-blue-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 transform rotate-45" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-light-blue-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 transform rotate-90" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-light-blue-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 transform rotate-180" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
  </div>
</template>

<img class="transform **rotate-0** ...">
<img class="transform **rotate-45** ...">
<img class="transform **rotate-90** ...">
<img class="transform **rotate-180** ...">
```

## Responsive

To control the rotation of an element at a specific breakpoint, add a `{screen}:` prefix to any existing rotate utility. For example, use `md:rotate-90` to apply the `rotate-90` utility at only medium screen sizes and above.

```html
<div class="transform rotate-45 **md:rotate-90**"></div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Rotate scale

By default, Tailwind provides seven general purpose rotate utilities. You change, add, or remove these by editing the `theme.rotate` section of your Tailwind config.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      rotate: {
-       '-180': '-180deg',
        '-90': '-90deg',
-       '-45': '-45deg',
        '0': '0',
        '45': '45deg',
        '90': '90deg',
+       '135': '135deg',
        '180': '180deg',
+       '270': '270deg',
      }
    }
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme).

### Variants

<Variants plugin="rotate" />

### Disabling

<Disabling plugin="rotate" />
